<template>
  <div class="seach">
    <div class="img"></div>
  <div class="wrapper">
		<input type="text" class="input" placeholder='搜索想看商品' v-model="seachInfo" >
		<div class="searchbtn" @click="seachGoods">
			<i class="fa fa-search"><img src="../assets/seach.png" alt=""></i>
		</div>
	</div>
  </div>
</template>

<script>
import {ref}from "vue"
import VueEvent from "@/js/mitt.js"
import {seach,handGoods} from "@/api/api.js"
export default {
  name:"Myseach",
  setup(){
    const seachInfo = ref()
    const seachGoods =()=>{
      if (seachInfo.value==null) {
        handGoods("get", "goodsList").then((res)=>{
          VueEvent.emit("goodsInfo",res.data)
        })
      }else{
        seach("get",seachInfo.value).then((res)=>{
        console.log(res.data);
        VueEvent.emit("goodsInfo",res.data)
      })
      }
      
    }
    return{
      seachInfo,seachGoods
    }
  }

}
</script>

<style lang="scss" scoped>
.seach{
  display: flex ;
  justify-content: space-around;

  align-items: center;
}
.img{
  width: 200px;
  height: 140px;
  background: url(@/assets/logo_m.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.wrapper{

  background: rgba(0, 0, 0, 0.6); /* 背景 */
  max-width: 550px; /* 最大宽度 */
  width: 100%;
  padding: 15px;
  border-radius: 5px; /* 边框圆角 */
  display: flex; /* 弹性盒布局 */
  justify-content: space-between; /* 主轴对齐方式 */
}

.wrapper .input{
  width: 85%;
  padding: 15px 20px;
  border: none;
  border-radius: 5px;
  font-weight: bold; /* 字体粗度 */
}

.searchbtn{
  background: #ffec00;
  width: 10%;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
}

.searchbtn .fa{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}
</style>